<template>
  <div class="pull-wrapper">
    <scroll :data="list" :listenScroll="true" :probeType="3" :pullup="pullup" @scroll="scrollHeight" @scrollToEnd="toLoadMore" ref="listRef">
      <ul class="list-wrapper">
        <li class="list-wrapper-list" v-for="(item,index) in list" :key="index">
          <div class="list-wrapper-item">{{item.content}}</div>
        </li>
        <loading v-show="hasMore"></loading>
      </ul>
    </scroll>
  </div>
</template>

<script>
  import Scroll from '@/components/scroll/scroll';
  import Loading from '@/components/loading/loading';
  export default {
    name: 'pullRefresh',
    data () {
      return {
        list: [],
        scrollY: 0,
        pullup:true, // 开启上拉加载更多
        hasMore:true // 加载更多样式控制
      }
    },
    components: {
      Scroll,
      Loading
    },
    mounted() {
      this.initPage();
      console.log(Scroll)
    },
    methods: {
      initPage() {
        this.$axios.get('/static/json/pullData.json', {

        }).then(res => {
          this.list = res.data.list;
          this.$nextTick(() => {
            this.$refs.listRef.refresh();
          })
        })
      },
      // 获取滚动的高度
      scrollHeight(pos) {
        this.scrollY = Math.abs(Math.round(pos.y))
      },
      // 加载更多
      toLoadMore (pos) {
        if (!this.hasMore) {
          return;
        }
        this.getImitatePaging(5);
      },
      // 模拟分页
      getImitatePaging (pageSize) {
        if (this.list.length > 50) {
          return;
        }
        let len = this.list.length - 1;
        let addObj = {};
        for(let i = len;i < pageSize;i++) {
          addObj = {content: `我是第${i}行`}
          this.list = this.list.concat(addObj);
        }
      }
    }
  }

</script>

<style scoped lang="less">
  .pull-wrapper {
    background-color: #fff;
  }

  .list-wrapper-list {
    text-align: center;
  }

  .list-wrapper-item {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    border-bottom: 1px solid #e5e5e5;
  }

</style>
